<template>
  <el-container>
    <el-main>
      <div class="search-container" style="padding: 10px">
        <div style="padding-left: 20px; color: #6e7071">
          <h2 style="font-size: 28px">我的博客</h2>
        </div>
        <el-row>
          <el-col :span="16">
            <div style="min-height: 1px;" />
            <div v-if="Object.keys(blogList).length">
              <CommonBlog
                v-for="(blog,index) in blogList"
                :key="index"
                :form="blog"
                :is-like-click="likeClick(blog.id)"
                :is-show-edit="true"
              />
            </div>
          </el-col>
          <el-col :offset="1" :span="6">
            <card-right />
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import CardRight from '@/components/Card-right'
import CommonBlog from '@/views/Blog/CommonBlog'
import { myBlog } from '@/networks/blog'

export default {
  name: 'Blog',
  components: { CardRight, CommonBlog },
  data() {
    return {
      blogList: [],
      likeList: []
    }
  },
  activated() {
    this.blogList = []
    this.init()
  },
  methods: {
    likeClick(id) {
      return this.likeList.indexOf(id) !== -1
    },
    init() {
      myBlog().then(res => {
        const data = res.data.data
        this.blogList = data.blogList
        this.likeList = data.likeList
      }).catch(err => err)
    }
  }

}
</script>

<style scoped>
  .search-container {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 1200px;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    position: relative;
    z-index: 100 !important;
  }

</style>
